<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <!-- 企业管理 -->
      <div class="companys">
        <el-card>
          <!-- 搜索 -->
          <search-form
            :showaddcompany.sync="showaddcompany"
            :companys-data="companysData"
            @onsearch="onsearch"
            @onclear="onclear"
          />
          <el-alert :title="title" type="info" show-icon></el-alert>
          <!-- table -->
          <companys-table
            v-loading="loading"
            :table-data="tableData"
            @delCompanys="getCompanysList"
            @editClick="editClick"
            @disableClick="disableClick"
          />
          <!-- 分页 -->
          <el-row type="flex" justify="end" style="margin-top:20px">
            <el-pagination
              background
              layout=" prev, pager, next,sizes,jumper"
              :total="total"
              :page-sizes="[10, 20, 30]"
              :page-size="page.pagesize"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            ></el-pagination>
          </el-row>
          <!-- 弹出层 新增、编辑 -->
          <add-company
            v-if="showaddcompany"
            :showaddcompany.sync="showaddcompany"
            :add-form.sync="addForm"
            @btnOk="getCompanysList"
            @onClose="onClose"
          />
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { getCompanysList, stateCompanys } from '../../api/companys'
import companysTable from './components/companysTable.vue'
import addCompany from './components/addCompany.vue'
import searchForm from './components/searchForm.vue'
export default {
  name: '',
  components: {
    companysTable,
    addCompany,
    searchForm
  },
  props: {},
  data() {
    return {
      loading: false,
      companysData: {
        tags: '',
        city: '',
        province: '',
        shortName: '',
        state: ''
      },
      tableData: [],
      addForm: {
        shortName: '', // 	企业名
        company: '', // 	所属公司
        province: '', // 		省份
        city: '', // 		城市
        tags: '', // 	标签
        remarks: '' // 		备注
      },
      page: {
        page: 1,
        pagesize: 10
      },
      editData: {},
      total: 0,
      title: '共0条记录',
      showaddcompany: false
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getCompanysList()
  },
  mounted() {},
  methods: {
    // 分页
    handleSizeChange(n) {
      this.page.pagesize = n
      this.getCompanysList()
    },
    handleCurrentChange(n) {
      this.page.page = n
      this.getCompanysList()
    },
    // 获取table的数据
    async getCompanysList() {
      this.loading = true
      const { data } = await getCompanysList(this.page)
      this.tableData = data.items
      this.total = data.counts
      this.title = `共 ${this.total} 条记录`
      this.loading = false
    },
    // 点击编辑
    editClick(data) {
      this.addForm = data
      this.showaddcompany = true
    },
    // 启用禁用
    async disableClick(data) {
      data.state = data.state ? 0 : 1
      await stateCompanys(data.id, data.state)
    },
    // 关闭弹窗
    onClose() {
      this.addForm = {
        shortName: '', // 	企业名
        company: '', // 	所属公司
        province: '', // 		省份
        city: '', // 		城市
        tags: '', // 	标签
        remarks: '' // 		备注
      }
    },
    // 搜索
    onsearch(data) {
      this.tableData = data
    },
    // 清楚
    onclear() {
      this.tableData = { tags: '', city: '', province: '', shortName: '', isFamous: '' }
      this.getCompanysList()
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep label {
  font-weight: 700;
}
::v-deep.el-input__inner {
  height: 32px;
}
.add_new_users {
  position: absolute;
  right: 8px;
}

.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
